<template>
    <div>
        <el-container>
            <el-header height="65px">小U商城大型后台管理系统
                <div class="box">
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="aqua">
                    <el-submenu index="2">
                        <template slot="title">{{ $store.getters.getUser.username }}</template>
                        <el-menu-item index="2-1">会员信息</el-menu-item>
                        <el-menu-item index="2-2">修改密码</el-menu-item>
                        <el-menu-item index="2-3" @click="logout">退出登录</el-menu-item>                
                    </el-submenu>
                </el-menu></div>
            </el-header>
            <el-container>
                <el-aside width="260px">
                    <!-- 侧边栏 -->
                    <Nav></Nav>
                </el-aside>
                <el-main>
                    <!-- 中心主体 -->
                    <!-- 二级路由出口 -->
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import Nav from "../components/nav.vue"
export default {
    data() {
        return {
            activeIndex: '1',
        activeIndex2: '1'
        }
    },
    methods: {
        handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
        // 退出登录
        logout() {
            // 清空仓库内容
            this.$store.dispatch('changeUserInfo', false)
            // 跳转到登录页
            this.$router.push('/login')
            window.location.replace('/login')
        }
    },
    mounted() {
     },
    watch: {},
    computed: {
    },
    filters: {},
    components: {
        Nav,
    }
}
</script>
<style lang="less" scoped>
.el-header {
    background-color: aqua;
    font-size: 23px;
}

// .btn {
//     float: right;
//     width: 100px;
//     height: 40px;
//     text-align: center;
// }
.box{
    width: 100px;
    height: 30px;
    // background-color: red;
    float: right;
    margin-top: 0px;
}
</style>